<!--jiaoyi.less-->
<template>
	<section id="jiaoyi">
		<HeaDer :Title='titleData'></HeaDer>
		<aside>
			<i class="iconfont icon-zhankaicebianlan" @click="mark.show = true"></i>
			<i class="iconfont icon-tongji" @click="goUrls('kline')"></i>
			<i class="iconfont icon-icon-test" @click="add_love()"></i>
			<i class="iconfont icon-five-star" @click="add_love()" v-show="mark.orlove"></i>
		</aside>
		<nav class="topNav">
			<section class="balance">
				<h2>{{getDatas.wallone}}</h2>
				<span class="tie">可用余额</span>
			</section>
			<section class="prompt" @click="prompt">
				<span>爆仓率</span>
			</section>
		</nav>
		<section class="trading">
			<nav class="contNav">
				<span class="buy" :class="{active:userData.otype==1}" @click="changeActive(1)">买入</span>
				<span class="sell" :class="{active2:userData.otype==2}" @click="changeActive(2)">卖出</span>
				<select class="select" v-model="userData.type">
					<option value="1">市价</option>
					<option value="2">限价</option>
				</select>
			</nav>

			<section class="inputWarp">
				<input type="number" placeholder="请输入价格" class="price" :disabled="mark.priceDisabled" v-model="userData.newprice" />
				<input type="number" :placeholder="getDatas.buyMin" class="num" v-model="userData.buynum"/>
				<div class="warpNum" v-show='!mark.priceDisabled'>
					<div class="add" @click="changeNum('add')">+</div>
					<span class="line">|</span>
					<div class="del" @click="changeNum('del')">-</div>
				</div>
				<!--滑块-->
				<section class="slider" v-show="mark.islogin">
					<van-slider v-model="userData.buynum" :min="getDatas.getLever.num_min" :max="Number(getDatas.buyMax)>100?100: Number(getDatas.buyMax)" :step='0.01' :show-value="false" />
					<!--<wv-slider v-model="userData.buynum" :min="getDatas.getLever.num_min" :max="Number(getDatas.buyMax)" :step='0.01' :show-value="false"></wv-slider>-->
					<span class="canNum">{{getDatas.buyMax}}</span>
				</section>
			</section>
			<section class="priceAllWarp">
				<h2>					
					交易额 <span class="priceAll">{{getDatas.allPrice}} </span>USDT
				</h2>
			</section>
			<section class="btn" :style="btnCont.ste" @click="tradingBtn">
				<span>{{btnCont.name}}</span>
			</section>
		</section>
		<section class="tradeOrder">
			<header>
				<h2>交易订单</h2>
				<span class="goAllList" @click="goUrls('cicanglist')">										
					<i class="van-icon van-icon-pending-orders"></i> 全部					
				</span>
			</header>
			<section class="tradeOrderData">
				<img src="../../static/img/nolist.png" class="noList" v-show="chengjiaoList.length == 0"/>

				<ul class="chengjiaoListWarp">
					<li class="chengjiaoList" v-for="(v,index) in chengjiaoList" :key='index'>
						<nav>
							<p class="buyWarp">
								<span v-if="v.otype == 1" class="sell">买入</span>
								<span v-if="v.otype == 2" class="buy">买出</span>
								<span>{{v.pname}}</span>
								<span>{{v.selltime}}</span>
							</p>
						</nav>
						<section class="chengjiaoDataWarp">
							<section class="chengjiaoData">
								<h2>价格</h2>
								<span>{{v.buyprice}}</span>
							</section>
							<section class="chengjiaoData">
								<h2>数量</h2>
								<span>{{v.buynum}}</span>
							</section>
							<section class="chengjiaoData">
								<h2>实际成交</h2>
								<span>{{v.buynum}}</span>
							</section>
						</section>
					</li>
				</ul>

			</section>
		</section>
		<van-popup v-model="mark.show" position="left" :overlay='true'>
			<!--数据-->
			<Datalist :method="method" @trans='getPrice' ref='offInt'></Datalist>
		</van-popup>

		<!--弹框-->
		<van-popup v-model="mark.mobileShow" position="right" :overlay="false">
			<section class="contents">
				<section class="return" @click="mark.mobileShow=false">
					<i class="van-icon van-icon-arrow-left"></i>
				</section>
				<section class="title">
					<h2>输入支付密码</h2>
				</section>
				<section class="formWarp">
					<van-field v-model="tpwd" placeholder="请输入交易密码" type="password" />
				</section>
				<section class="btnWarp" @click="submit">
					<section class="btn">
						确定
					</section>
				</section>
			</section>
		</van-popup>
		<!--底部导航-->
		<FooTer :Active="1"></FooTer>
	</section>
</template>
<script>
	import Header from "./common/header.vue";
	import Footer from "./common/footer.vue";
	import Datalist from "./common/dataList.vue";
	export default {
		// 数据
		data() {
			return {
				code: 'eth_usdt', //ustd 数据切换唯一标识	(这个字段非常重要)
				titleData: { //向主件header要传的值  其中 name是名字  flat控制有没有返回箭头
					name: 'ETH_USDT',
					flat: 0
				},
				btnCont: {
					name: '买入',
					ste: 'background:@down'
				},

				//页面所要用到的标志位
				mark: {
					show: false, //控制侧边栏出来和隐藏
					orlove: false, //控制是不是添加自选
					islogin: false, //控制有没有登录
					priceDisabled: true, //价格可不可以输入标志位  false 可以输入  true 不可以输入
					mobileShow: false
				},
				//需要向后台传的数据（订单详情）
				userData: {
					mobile: '', //手机号
					newprice: '', //当前价格
					type: '1', //1 市价 2 限价
					buynum: null, //买入数量
					shopname: 'eth_usdt', //名称
					otype: 1 //1买涨（买入） 2买跌（买出）
				},

				//后台返过来的数据（需要在页面上展示的数据）
				getDatas: {
					wallone: '--', //钱包
					mail: '', //邮箱
					tpwd: '', //交易面密码
					status: '', //实名验证状态
					getLever: [], //杠杆计算参数 （后台返回） 主要是手续费保证金过夜费的计算
					buyMin: '0', //最小购买量
					buyMax: '--', //可购买最大量
					allPrice: '--' //总钱数
				},
				chengjiaoList:[],
				tpwd: null //交易密码
			};
		},
		// 当数据发生改变时
		watch: {
			//监听type(买入卖出)的变化
			'userData.type' (val, oval) {
				var _this = this;
				_this.mark.priceDisabled = val == 1 ? true : false;
			},
			//监听成交数量的变化
			'userData.buynum' (val, oval) {
				var _this = this;
				//解决后台报错问题（每次数据更新后就把数据类型改变）
				_this.userData.buynum = Number((_this.userData.buynum));
				if(val.toString().indexOf('.') != -1 && val.toString().split(".")[1].length >2){
					_this.userData.buynum = val.toString().substring(0, val.toString().lastIndexOf('.') + 3);
				}
				_this.allPrice();
				if(val > _this.getDatas.buyMax) {
					_this.userData.buynum = _this.getDatas.buyMax;
				}

			},
			//价格监听（更新计算）
			'userData.newprice' (val, oval) {
				this.allPrice();
			},
			//code监听（切换状态）
			'code' (val, oval) {
				//刷新数据
				var _this = this;
				_this.titleData.name = val.toUpperCase();
				_this.userData.buynum = null
				_this.userData.shopname = val;
				//				_this.getLever(val);

			}
		},

		// 方法
		methods: {
			//接受父子主件传的值（现在价格不是实时获取 要想实时获取去子主件里面把监听器打开）
			getPrice(msg) {
				var _this = this;
				_this.userData.newprice = Number(msg);
			},
			//method 像子主件传值 点击侧边切换
			method(v, n) {
				//v 是code  n 是name 
				var _this = this;
				_this.code = v;
				_this.mark.show = false;
				_this.getNewPrice();
			},
			maxBuyNum() {
				var _this = this;
				if(!_this.mark.islogin) return false;
				
				//计算最大购买量(计算公式在根据业务需要更改)
				/**
				 * 计算可以购买的最大数量
				 * wallet 钱包总金额
				 * mCurrentPriceD 当前价格
				 * leverage 杠杆
				 * trans_fee 手续费率
				 * bond_rate 保证金费率
				 * 计算公式 wallet * leverage / (mCurrentPriceD * (trans_fee + 1 + bond_rate * leverage))
				 */
				_this.getDatas.buyMax = Math.floor(Number(_this.getDatas.wallone) * Number(_this.getDatas.getLever.leverage) / (Number(_this.userData.newprice) * (_this.$public.toPoint(_this.getDatas.getLever.trans_fee) + 1 + _this.$public.toPoint(_this.getDatas.getLever.bond_rate) * Number(_this.getDatas.getLever.leverage))));
			},
			//计算总交易额
			allPrice() {
				var _this = this;
				if(!_this.mark.islogin) return false;

				/**
				 * 计算总价格 (计算公式在根据业务需要更改)
				 * price 单价
				 * num 购买数量
				 * leverage 杠杆
				 * trans_fee 手续费率
				 * bond_rate 保证金费率
				 * 计算公式 (price * num) / leverage + (price * num * bond_rate) + (price * num) / leverage * trans_fee
				 */
				_this.getDatas.allPrice = Number(((_this.userData.newprice * _this.userData.buynum) / _this.getDatas.getLever.leverage + (_this.userData.newprice * _this.userData.buynum * _this.$public.toPoint(_this.getDatas.getLever.bond_rate)) + (_this.userData.newprice * _this.userData.buynum)).toFixed(2));
			},
			//获取计算最大购买量和总金额所需参数
			getLever() {
				var _this = this;
				_this.$http.post(_this.$host.get_lever, {
					code: _this.code
				}).then(function(data) {
					if(data.status == '200') {
						_this.getDatas.getLever = data.data.data
						_this.getDatas.getLever.num_min = Number(_this.getDatas.getLever.num_min);
						_this.getDatas.buyMin = '最少购买量' + _this.getDatas.getLever.num_min;
						//为了防止出现NAN显示出现做个判断
						while(_this.getDatas.wallone != 0) {
							_this.maxBuyNum(); //计算最大购买量
							_this.allPrice(); //计算总金额
							break;
						}
					}
				}).catch(function() {})
				//获得当前价格

			},
			//获得成交数据
			getChengJiao(){
				var _this = this;
				_this.$http.post(_this.$host.chengjiao,{
					mobile: sessionStorage.mobile
				}).then(function(data){
					if(data.status == 200) {
						_this.chengjiaoList = data.data.data;
					}
	
				}).catch(function(){})
				
			},
			//获得最新数据
			getNewPrice() {
				var _this = this;
				_this.$http.get(_this.$host.hang, {
					params: {
						code: _this.code,
						type: 2
					}
				}).then(function(data) {
					if(data.status == '200') {
						_this.userData.newprice = Number(data.data.data[0].closePrice);
						_this.getLever();
					}
				}).catch(function() {})
			},
			//点击加减执行函数
			changeNum(num) {
				var _this = this;
				if(num == 'add') {
					_this.userData.newprice += 0.0001;
				} else if(num == 'del') {
					_this.userData.newprice = _this.userData.newprice <= 0.0001 ? 0.0001 : _this.userData.newprice -= 0.0001;
				}
				_this.userData.newprice = Number(_this.userData.newprice.toFixed(4));
			},
			//添加自选执行函数
			add_love() {
				var _this = this;
				if(_this.mark.orlove == true) {
					_this.$toast.success('已取消');
					_this.mark.orlove = false;
				} else {
					_this.$toast.success('添加成功');
					_this.mark.orlove = true;
				}
			},
			//点击爆仓执行函数
			prompt() {
				var _this = this;
				_this.$dialog.alert({
					title: '提示',
					message: '当风险率达到 50% 时,系统会强制平仓'
				});
			},
			//点击进入k线执行函数
			goUrls(urls) {
				var _this = this;
				if(urls == 'cicanglist' && !_this.mark.islogin) {
					_this.$toast('请先登录');
					return false;
				}
				_this.$public.go(urls, 0, _this, {
					id: _this.code
				})
			},
			//点击买入还是卖出执行函数
			changeActive(index) {
				var _this = this;
				_this.userData.otype = index == undefined ? 1 : index;
				switch(index) {
					case 1:
						_this.btnCont = {
							name: '买入',
							ste: 'background:#03c088'
						}
						break;
					case 2:
						_this.btnCont = {
							name: '卖出',
							ste: 'background:#e86d43'
						}
						break;
				}
			},
			//获取用户信息
			getData() {
				/*
				 先判断用户有没有登录
				 没有登录不请求接口并提示登录
				 * */
				var _this = this;
				_this.mark.islogin = _this.$public.islogin();
				if(!_this.mark.islogin) {
					_this.$toast('请先登录');
					_this.getNewPrice(); //计算最新价格和杠杆
					return false;
				}
				_this.getChengJiao();  //成交列表
				//请求个人数据获得对应信息
				_this.userData.mobile = sessionStorage.mobile;
				_this.$public.userInfo({
					_this: _this,
					mobile: sessionStorage.mobile,
					sfun: function(data) {
						_this.getDatas.wallone = data.data.data.wallone;
						_this.getDatas.mail = data.data.data.mail;
						_this.getDatas.status = data.data.data.status;
						_this.getDatas.tpwd = data.data.data.tpwd;
						_this.getNewPrice(); //计算最新价格和杠杆
					}
				})
			},
			//点击买入 卖出执行函数
			tradingBtn() {
				/*
				 todo 1,判断符不符合交易条件
				 	  2，切换出支付密码界面
				 * */
				var _this = this;
				//判断有没有资格交易
				if(!_this.$public.trading(_this)) {
					return false;
				} else {
					//判断交易条件（参数）是否正确
					if(!_this.$public.Ints(_this.userData.newprice)) {
						_this.$toast('价格格式有误');
						return false;
					} else if(!_this.$public.Ints(_this.userData.buynum)) {
						_this.$toast('数量格式有误');
						return false;
					} else if(_this.userData.buynum < _this.getDatas.getLever.num_min) {
						_this.$toast(_this.getDatas.buyMin + '个');
						return false
					} else if(_this.getDatas.wallone < _this.getDatas.allPrice) {
						_this.$toast('您的余额不足');
						return false;
					} else {
						_this.mark.mobileShow = true;
					}

				}
			},
			//点击下单执行函数
			submit() {
				var _this = this;
				if(!_this.$public.pwd(_this.tpwd)) {
					_this.$toast('密码格式有误');
					return false;
				}
				_this.$public.loading('下单中...', _this);
				_this.$http.post(_this.$host.check_tpwd, {
					tpwd: _this.tpwd,
					mobile: _this.userData.mobile

				}).then(function(data) {
					if(data.data.status == '200') {
						_this.$http.post(_this.$host.add_order, _this.userData).then(function(data) {
							if(data.data.status == '200') {
								_this.$public.go('cicanglist', 0, _this);
							_this.$toast('操作成功');								
							}
						}).catch(function() {})
					} else {
						_this.$toast('密码错误');
						_this.tpwd = '';
					}
				}).catch(function() {})
			}
		},
		// 加载模块
		components: {
			"HeaDer": Header,
			"FooTer": Footer,
			"Datalist": Datalist
		},
		created: function() {
			var _this = this;
			_this.getData(); //请求数据	
			_this.userData.otype = _this.$route.query.otype //接受kline传过来的参数
			_this.code = _this.$route.query.name == null ? _this.code : _this.$route.query.name; //接受code值用来更新数据 如果没有code 这默认第一个

		},
		mounted: function() {
			var _this = this;
			_this.changeActive(_this.userData.otype); //判断是买入还是卖出

		}
	};
</script>

<!--注-->
<!--
	纯在一个bug就是 滑杆只能滑到100（ui主件的问题）
	这样就会导致两个现象
	1，用户要想购买超过100的只能手动输入
	2，担最低购买量大于100时 滑杆会飞跑(这个ug可以处理 但不利于后期扩展和维护)
	
-->

